<div flex layout="row" layout-align="start center">
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Chart Theme:
  </div>
  <mat-form-field>
    <mat-select
      [(value)]="selectedTheme"
      (valueChange)="selectChartTheme($event)"
    >
      <mat-option *ngFor="let theme of themes" [value]="theme">
        {{ theme }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Binning method:
  </div>
  <mat-form-field>
    <mat-select [(value)]="selectedMethod">
      <mat-option *ngFor="let method of methods" [value]="method">
        {{ method }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
  <td-chart-dataset
    [source]="[
      [8.3, 8.5],
      [8.6, 8.7],
      [8.8, 9.2],
      [10.5, 9.9],
      [10.7, 10.2],
      [10.8, 10.3],
      [11.0, 11.2],
      [11.0, 11.3],
      [11.1, 11.3],
      [11.2, 11.5],
      [11.3, 11.6],
      [11.4, 11.7],
      [11.4, 11.8],
      [11.7, 12.0],
      [12.0, 12.0],
      [12.9, 12.5],
      [12.9, 12.9],
      [13.3, 13.0],
      [13.7, 13.5],
      [13.8, 14, 8],
      [14.0, 15.1],
      [14.2, 15.2],
      [14.5, 15.3],
      [16.0, 15.8],
      [16.3, 16.2],
      [17.3, 16.3],
      [17.5, 16.4],
      [17.9, 19.5],
      [18.0, 19.8],
      [18.0, 20.1],
      [20.6, 20.2]
    ]"
  ></td-chart-dataset>
  <td-chart-toolbox
    [show]="true"
    [right]="30"
    [top]="10"
    [feature]="{
      dataView: {
        readOnly: true,
        title: 'View Data',
        lang: ['Data View', 'Turn Off', 'Refresh']
      },
      dataZoom: { title: { zoom: 'Zoom', back: 'Back' } },
      magicType: {
        type: ['line', 'bar'],
        title: { line: 'Line', bar: 'Bar' }
      },
      restore: { title: 'Restore' }
    }"
  >
  </td-chart-toolbox>
  <td-chart-tooltip [trigger]="'item'">
    <ng-template let-params tdTooltipFormatter>
      <ng-container *ngIf="params">
        <div layout="row" layout-align="start center">
          <mat-icon>
            <span [style.color]="params.color">people</span>
          </mat-icon>
          <span class="mat-caption pad-left-sm">
            {{ params.seriesName ? params.seriesName : params.name }}:
            {{ params.value }}
          </span>
        </div>
      </ng-container>
    </ng-template>
  </td-chart-tooltip>
  <td-chart-x-axis
    [show]="true"
    [position]="'bottom'"
    [type]="'category'"
    [boundaryGap]="true"
  ></td-chart-x-axis>
  <td-chart-y-axis
    [show]="true"
    [type]="'value'"
    [position]="'right'"
    [splitLine]="{ lineStyle: { type: 'dotted' } }"
  ></td-chart-y-axis>
  <td-chart-series
    td-histogram
    [method]="selectedMethod"
    [name]="'Sparrows'"
  ></td-chart-series>
  <td-chart-series
    td-histogram
    [method]="selectedMethod"
    [name]="'Crows'"
    [datasetIndex]="2"
  ></td-chart-series>
</td-chart>
